<template>
  <div v-if="textFlag" style="height:400px;position: relative;">

    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import pieEchartsOption from '@/utils/echarts/pie.js'
  export default {
    components: {
      IEcharts
    },
    props: {
      dateItem: {
        type: String,
        default: ''
      },
      dateList: {
        type: Array,
        default: []
      }
    },
    data () {
      return {
        textFlag:true,
        jqTimelist: {
          color: ['#3398DB'],
          title: {
            text: '全局各处室本月度工单退件数统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            'formatter': '{b}:{c}件'
          },
          grid: {
            left: '20%',
            right: '25%',
            top: '80px',
            bottom: '50px',
            containLabel: false
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: '单位（件）',
              type: 'value'
              // minInterval: 1
            }
          ],
          series: [
            {
              name: '退件率',
              type: 'bar',
              barWidth: '30px',
              data: [],
              'label': {
                'normal': {
                  'show': true,
                  'position': 'top',
                  'formatter': '{c}件',
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#3398DB'
                }
              }

            }
          ]
        }
      }
    },
    watch: {
    dateItem: {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue) {
            // console.log('cao1')
            this.dateType = 'i'
            this.getEchartsData()
            switch (newValue) {
              case '1':
                this.jqTimelist.title.text='全局各处室本月度工单退件数统计'
                break;
                case '2':
                this.jqTimelist.title.text='全局各处室上月度工单退件数统计'
                break;
                case '3':
                this.jqTimelist.title.text='全局各处室本年度工单退件数统计'
                break;
                case '4':
                this.jqTimelist.title.text='全局各处室去年度工单退件数统计'
                break;
              default:
                break;
            }
          }

        }
      },
      immediate: true,
      deep: true
    },
    dateList: {
      handler (newValue, oldValue) {
        // console.log(newValue,666666)
        if (newValue !== oldValue) {
          if (newValue.length !== 0) {
            this.dateType = 'd'
            this.getEchartsData()
            // console.log('cao2')
              this.jqTimelist.title.text='全局各处室自定义月份工单退件数统计'
          }

        }
      },
      deep: true
    },
  },
  created () {
    // this.getEchartsData()
  },
  methods: {
    getEchartsData () {
      this.$axios.post('/count/workCharts/contentSendBackCharts', {}).then(res => {
        if (res) {
            // this.textFlag=true
          this.jqTimelist.xAxis[0].data = res.map(item => item.deptName)
          this.jqTimelist.series[0].data = res.map(item => item.backNumber)
        }
      })
    }
  }

}
</script>

<style lang='scss' scoped>
  .warn_gif {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 100%;
    // text-align: center;
    img {
      display: block;
      width: 50%;
      margin: 0 25%;
    }
  }
</style>
